<template>
  <div class="container">
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.back()" />
    <!-- 搜索 -->
    <van-search
      v-model="keywords"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    />
    <!-- 联想词 -->
    <van-cell-group class="suggest-box" v-if="keywords">
      <!-- span高亮联想关键词 -->
      <van-cell
        icon="search"
        @click="onSearch(image.replace(`<span>${keywords}</span>`, keywords))"
        v-for="(image, i) in imageList"
        :key="i"
        ><p v-html="image"></p
      ></van-cell>
    </van-cell-group>

    <!-- 搜索记录 -->
    <div class="history-box" v-else>
      <div class="head">
        <span>历史记录</span>
        <van-icon @click="delAll" name="delete"></van-icon>
      </div>
      <van-cell-group>
        <van-cell v-for="(item, i) in historyList" :key="item">
          <a class="word_btn">{{ item }}</a>
          <van-icon
            @click="delhis(i)"
            class="close_btn"
            slot="right-icon"
            name="cross"
          />
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { getImageList } from '../../api/articleSearch'
const TT_HT = 'TT_HT'
// localStorage.setItem(TT_HT, JSON.stringify(['1024', '华为', '苹果']))
export default {
  name: 'search-index',
  data () {
    return {
      keywords: '',
      historyList: JSON.parse(localStorage.getItem(TT_HT)) || [], // 搜索记录列表
      timeId: null,
      imageList: [] // 联想数组
    }
  },
  watch: {
    // 防抖
    keywords () {
      // 非空
      if (!this.keywords) {
        this.imageList = []
        return
      }
      // 如果有就清除;
      this.timeId && clearTimeout(this.timeId)
      this.timeId = setTimeout(async () => {
        console.log(this.keywords)
        const { data } = await getImageList(this.keywords)
        // console.log(data)
        // 关键字是红色因此要用span标签
        // 如果后台返回null 则进行判断
        if (data.options[0] === null) return
        this.imageList = data.options.map(item => item.toLowerCase().replace(this.keywords, `<span>${this.keywords}</span>`))
        // console.log(this.imageList)
      }, 600)
    }
  },
  methods: {
    // 删除单个
    delhis (i) {
      // 软删
      this.historyList.splice(i, 1)
      // 硬删
      localStorage.setItem(TT_HT, JSON.stringify(this.historyList))
    },
    // 删除全部
    delAll () {
      this.historyList = []
      localStorage.setItem(TT_HT, JSON.stringify(this.historyList))
    },
    onSearch (val) {
      // 回车后才有里面的内容
      console.log(val)
      if (!val) return
      // 排重  Set构造函数参数是一个数组, 不会添加重复的项
      const historySet = new Set(this.historyList)
      historySet.add(val)
      this.historyList = [...historySet]
      localStorage.setItem(TT_HT, JSON.stringify(this.historyList))
      this.$router.push(`/search/result?q=${val}`)
    }
  }
}
</script>

<style scoped lang='less'>
.suggest-box {
  /deep/ .van-cell {
    padding: 10px 20px;
    color: #999;
    p {
      span {
        color: red;
      }
    }
  }
}
.history-box {
  padding: 0 20px;
  .head {
    line-height: 36px;
    color: #999;
    text-align: left;
    .van-icon {
      font-size: 16px;
      float: right;
      margin-top: 10px;
    }
  }
  .van-cell {
    padding: 10px 0;
  }
  .word_btn {
    color: #3296fa;
  }
  .close_btn {
    margin-top: 5px;
    color: #999;
  }
}
</style>
